<template>
  <div class="lockqrcodes-main">
    <div class="lockqrcodes-header">
      <div class="align-center">
        <div class="head-title">
          锁客二维码
        </div>
        <div class="geek-btn" @click="onNavigationTo('/hook/lockqrcodes/explain')">
          <i class="el-icon-menu"></i>
          功能说明
        </div>
      </div>
    </div>

    <div class="lockqrcodes-wrap">
      <div class="card-search-filter">
        <el-button type="primary" size="small" @click="onNavigationTo('/hook/lockqrcodes/add')">
          <i class="el-icon-plus"></i>
          新建锁客二维码
        </el-button>
      </div>
      <el-table ref="hookTable" :data="dataSource" header-cell-class-name="table-header-class" tooltip-effect="dark"
        header-row-class-name="table-header-row-class" row-class-name="table-row-class" style="width: 100%">
        <el-table-column property="mobile"  width="300" label="二维码图片">
          <template slot-scope="scope">
            <div class="code-big">
            <img src="@/assets/images/gongzonghao.jpg"/>
            <div class="com-row">创建时间：2024-05-13 17:31</div>
            <div class="com-row">创建人：主账号</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="name" label="关联渠道活码">
          <template slot-scope="scope">
            <div class="title">渠道名称</div>
          </template>
        </el-table-column>
        <el-table-column property="address" label="落地页打开次数">
        </el-table-column>
        <el-table-column property="address" label="渠道活码新增客户数">
        </el-table-column>
        <el-table-column property="address" label="防重复添加客户数">
        </el-table-column>
        <el-table-column property="option" label="操作">
          <el-button type="text">下载</el-button>
          <el-button type="text">复制链接</el-button>
          <el-button type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </el-table-column>
        <template slot="empty">
          <TableEmpty />
        </template>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      actived: 0,
      codeStatus: [
        {
          value: 1,
          label: '闵雨微'
        }, {
          value: 2,
          label: '肖采薇'
        }],
      dataSource: [
        {
          mobile:'渠道名称',
          name:'今日新增好友',
          address:'0',
        }
      ],
    }
  },
  methods: {
    onChangeTabs(tabIdx) {
      this.actived = tabIdx
    },
    onNavigationTo(path) {
      this.$router.push(path)
    },
  },
}
</script>
<style lang="scss" scoped>
.lockqrcodes-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;
  .lockqrcodes-header {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .align-center {
      display: flex;
      align-items: center;

      .head-title {
        font-size: 14px;
        line-height: 22px;
        font-weight: 600;
        .example-text {
          color: #2f54eb;
          cursor: pointer;
          margin-left: 8px;;
          font-weight: 400;
          &:hover + .example-modal {
            display: block;
          }
        }
      }

      .geek-btn {
        color: #2f54eb;
        background: #f0f5ff;
        border-color: #adc6ff;
        padding: 2px 7px;
        font-size: 13px;
        border: 1px solid #e9e9e9;
        margin-left: 40px;
        cursor: pointer;
      }
    }

  }

  .lockqrcodes-wrap {
    margin: 12px;
    background-color: #fff;
    border-radius: 4px;
    .card-search-filter {
      display: grid;
      column-gap: 8px;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      grid-template-columns: 138px;
    }
  }
}
.title {
  display: flex;
  align-items: center;
  height: 25px;
  color: rgb(87, 107, 149);
  margin-right: 10px;
  font-weight: 600;
  cursor: pointer;
}
.com-row{
  color: rgba(0, 0, 0, .45);
}

.popover-big {
  .popover-title {
    i {
      font-size: 16px;
      color: #f8ac59;
      margin-right: 10px;
    }
  }
  .popover-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}
.code-big {
  position: relative;
  height: 56px;
  padding-left: 60px;
  padding-top: 10px;
  img {
    width: 56px;
    height: 56px;
    position: absolute;
    left: 0px;
    top: 0px;
  }
}
</style>
